import React, { useState, useEffect } from "react";
import { connect } from "dva";
import { Spin, Modal, Icon, Table, Input, message } from "antd";
import styles from "./index.less";

const AddGroupMember = ({
	isShowAddGroupMember,
	dispatch,
	userList,
	userListLoading,
	userListTotal,
	group,
}) => {
	const [loading, setLoading] = useState();
	const [dataSource, setDataSource] = useState([]);
	const [selectedRowKeys, setSelectedRowKeys] = useState([]);
	const [selectedRows, setSelectedRows] = useState([]);
	const [selectedRow, setSelectedRow] = useState({});
	const [searchValue, setSearchValue] = useState("");

	useEffect(() => {}, []);

	const hide = () => {
		dispatch({
			type: "singleSkillSet/showGroupMember",
			payload: {
				isShowAddGroupMember: false,
			},
		});
	};

	// 翻页
	const onChange = (page, pageSize) => {
		handleSearch({
			id: group.id,
			ctsNameOrCtsNo: "",
			current: page,
			size: pageSize,
		});
	};

	// 确定
	const handleOk = () => {
		if (!selectedRowKeys.length) {
			message.error("请选择组成员");
			return;
		}
		setLoading(true);
		dispatch({
			type: "singleSkillSet/addGroupMember",
			payload: {
				id: group.id,
				userIds: "[" + selectedRowKeys + "]",
			},
			callback: () => {
				setLoading(false);
				setSelectedRowKeys([]);
				setSelectedRows([]);

				hide();
				message.success("添加成功");
			},
		});
	};

	// 查询
	const handleSearch = (payload) => {
		dispatch({
			type: "singleSkillSet/loadUserList",
			payload,
		});
	};

	return (
		<Modal
			title='选择组成员'
			visible={isShowAddGroupMember}
			onCancel={hide}
			width={650}
			onOk={handleOk}
			okButtonProps={{
				loading,
			}}
			destroyOnClose>
			<Input
				placeholder='姓名、工号（按Enter检索）'
				style={{
					marginBottom: "20px",
				}}
				onChange={(e) => {
					setSearchValue(e.target.value);
				}}
				onPressEnter={() => {
					setLoading(true);
					dispatch({
						type: "onlineSkillSet/searchGroupMember",
						payload: searchValue,
					});
				}}
			/>

			<Table
				rowKey={(record) => record.userId}
				loading={userListLoading}
				columns={[
					{
						title: "用户名",
						dataIndex: "username",
						key: "username",
					},
					{
						title: "姓名",
						dataIndex: "nick",
						key: "nick",
					},
				]}
				scroll={{ y: "400px" }}
				dataSource={userList}
				pagination={{
					pageSize: 10,
					onChange: onChange,
					total: userListTotal,
				}}
				rowSelection={{
					selectedRowKeys,
					onChange: (selectedRowKeys, selectedRows) => {
						setSelectedRowKeys(selectedRowKeys);
						setSelectedRows(selectedRows);
					},
				}}
			/>
		</Modal>
	);
};

export default connect(({ singleSkillSet }) => ({
	...singleSkillSet,
}))(AddGroupMember);
